// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { search } from '../../../module/module'

// 引入样式
import Style from '../style/style.js';

// 引入公用组件
import { Status, NavBar, ScrollableTabBar, Good, RnFlatList } from '../../../components/index.js'

// 引入专用组件
// import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, borderBottom, borderTop, pathHead, requestPlateFollow, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../../util/utils.js'

class CategoryGood extends Component {

    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            loading: false,
            dataList: {
                total: 0,
                size: 10,
                current: 1,
                pages: 1,
                records: []
            }
        }
    }

    componentDidMount() {
        this.loading = Toast.loading('加载中')

        this.handleSearch({
            current: 1,
        })
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps, this.props)
        if (nextProps.data.id != this.props.data.id) {
            this.setState({ refreshing: true });
            search({
                categoryId: nextProps.data.id,
                current: 1,
                size: 10,
            }).then(res => {
                this.setState({
                    dataList: res.data,
                    refreshing: false
                })
            }).catch(error => {
                console.log(error, 11111)
            })
        }
    }

    handleSearch(options) {
        const { data } = this.props
        search({
            categoryId: data.id,
            size: 10,
            ...options
        }).then(res => {
            Portal.remove(this.loading)

            this.setState({
                dataList: {
                    ...res.data,
                    records: this.state.dataList.records.concat(res.data.records)
                }
            })
        }).catch(error => {
            console.log(error, 11111)
        }).finally(() => {
            Portal.remove(this.loading)
          })
    }

    onRefresh = () => {
        this.setState({ refreshing: true });
        const { data } = this.props
        const { dataList: { size } } = this.state
        search({
            categoryId: data.id,
            current: 1,
            size: 10,
        }).then(res => {
            this.setState({
                dataList: res.data,
                refreshing: false
            })
        }).catch(error => {
            console.log(error, 11111)
        })
    }

    onEndReached = () => {
        const { dataList: { current, size, records, total } } = this.state
        if (records.length < total) {
            this.handleSearch({
                current: current + 1,
            })
        }
    }

    onScroll = (e) => {

    }

    render() {
        const { width, backgroundColor, select, onSelect } = this.props
        const { refreshing, dataList } = this.state
        console.log(dataList)
        return (
            <RnFlatList
                style={{
                    flex: 1,
                    backgroundColor: backgroundColor || '#f0f2f5',
                }}
                columnWrapperStyle={{
                    flexDirection: 'row',
                }}
                onScroll={this.onScroll}
                refreshing={refreshing}
                onRefresh={this.onRefresh}
                onEndReached={this.onEndReached}
                numColumns={2}
                removeClippedSubviews={true}
                data={dataList}
                renderItem={({ item }) => {
                    return <Good width={width} select={select} onSelect={onSelect} data={item} />
                }}
            />
        );
    }
}


export default connect(({ user }) => ({
    user
}))(CategoryGood)
